<template>
    <h1>客户管理123</h1>
    <el-form :model="customer" label-width="120px">
        <el-row>
            <el-col :span="8">
                <el-form-item label="客户名">
                    <el-input v-model="customer.customerName" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="客户昵称">
                    <el-input v-model="customer.customerNickName" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="客户电话">
                    <el-input v-model="customer.customerTel" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="客户类别">
                    <el-select v-model="customer.customerType" placeholder="客户类别">
                        <el-option v-for="customerType in customerTypes" :key="customerType.dataId"
                            :label="customerType.dataTag" :value="customerType.dataValue" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="联系人">
                    <el-input v-model="customer.linkMan" />
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="联系人电话">
                    <el-input v-model="customer.linkManPhone" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="印业执照">
                    <el-upload 
                    :action="fileUpload.uploadUrl" 
                    :name="fileUpload.uploadFileName"
                    list-type="picture-card" 
                    :auto-upload="true"
                    limit="1"
                    :on-success="uploadSuccess">
                        <el-icon>
                            <Plus />
                        </el-icon>

                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <el-icon><zoom-in /></el-icon>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleDownload(file)">
                                        <el-icon>
                                            <Download />
                                        </el-icon>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<script>
export default {
    data() {
        return {
            fileUpload:{
                uploadUrl:"http://localhost:8180/upload", //  上传图片的url
                uploadFileName:"uploadFile" //  上传图片的参数名
            },
            customer: {},
            customerTypes: [
                { dataId: 1, dataTag: "普通客户", dataValue: 11 },
                { dataId: 2, dataTag: "优质客户", dataValue: 12 },
                { dataId: 3, dataTag: "稳定客户", dataValue: 13 },
                { dataId: 4, dataTag: "超级客户", dataValue: 14 },
            ]
        }
    },methods:{
        /**
         * 文件上传成功的勾子函数
         * @param {*} response 后端响应的结果
         */
        uploadSuccess(response){
            console.log(response);
            this.customer.licensePic = response.msg;
        }
    }
}
</script>